<script lang="ts" setup>
import navigateTo from '@/utils/navigator'

defineProps<{
  color: string
  backgroundColor: string
}>()

function onSearchInputClick() {
  navigateTo('/pages/search/index', { animationType: 'pop-in' })
}
</script>

<template>
  <view class="search_container" @click="onSearchInputClick">
    <image src="@/static/images/icons/index/search_top.svg" w-16rpx h-6rpx mode="scaleToFill" class="search_icon_top" />
    <image src="@/static/images/icons/index/search.svg" w-32rpx h-28rpx mode="scaleToFill" class="search_icon" />
    <view class="search_input" confirm-type="search">
      <text>请输入搜索内容</text>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.search_container {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;

  image {
    position: absolute;
    left: 30rpx;
  }

  .search_icon_top {
    top: 35rpx;
    left: 36rpx;
  }

  .search_input {
    height: 60rpx;
    width: 100%;
    background-color: v-bind(backgroundColor);
    font-size: 24rpx;
    border-radius: 25rpx;
    padding-left: 78rpx;

    text {
      color: #a5a1a1;
      line-height: 60rpx;
    }
  }
}
</style>
